<template>
	<view class="bg-light" style="height: 100%;">
		<!-- 购物车 -->
		<scroll-view scroll-y="true" class="w-100 shopCart" :style="'height:calc(100vh - 110rpx - 55px)'">
			<!-- 商品 -->
			<view class="w-100" style="height: 20px;">
				<view class="fixed-top text-right bg-light shadow" style="height: 20px;">
					<text @click="isEdit = !isEdit" class="mr-2 font-sm text-muted">{{isEdit?'取消':'编辑'}}</text> 
				</view>
			</view>
			<view class="py-2">
				<view v-for="(item,index) in ShopCar" :key="index" class="mx-2 py-2 bg-white rounded-lg mb-2 position-relative overflow-hidden">
					<!-- 关闭按钮 -->
					<view @click="handleClose(item)" class="bg-danger" style="width: 60rpx;height: 130rpx; z-index: 99; position: absolute; top:-44rpx; right:-34rpx;transform: rotate(-45deg);">
						<view style="transform: rotate(45deg);position: absolute; top:24rpx; left:6rpx;">
							<uni-icons color="#fff"  type="closeempty" size="12"></uni-icons>
						</view>	
					</view>
					<view class=" flex align-center ">
						<view class="mx-2 flex-shrink">
							<uni-icons @click="handleSelect(item)" :type="item.isSelect?'checkbox-filled':'circle'"
								color="#28a745" size="20"></uni-icons>
						</view>
						<view class="mr-2 w-100">
							<view class="flex">
								<view class="flex-shrink rounded overflow-hidden shadow" style="width: 180rpx; height: 180rpx;">
									<image v-if="BASE_IMG" :src="BASE_IMG+item.Specifications_Picture_URL" style="width: 100%;height: 100%;" mode="aspectFit"></image>
								</view>
								<view class="ml-2 flex flex-column justify-between w-100">
									<text class="font font-weight-bold text-ellipsis-2">{{item.Article_Name}}</text>
									<view class="flex justify-between">
										<view class="mr-2 font-sm rounded-lg flex justify-center align-center"
											style="height: 40rpx;"
											v-if="item.Specifications_Name">
											{{item.Specifications_Name}}
										</view>
										<view class="mr-2 font-sm rounded-lg flex justify-center align-center"
											style="height: 40rpx;"
											v-if="item.Activity_Name">
											{{item.Activity_Name}}
										</view>
									</view>
									<view class="flex justify-between">
										<money :money="String(item.Sales_Unit_Price)"></money>
										<counter @remove="handleClose(item)" @change="handle($event,item)" v-model="item.Quantity" :loading="loading"></counter>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="ShopCar.length == 0" class="flex justify-center">
					<image style="width: 50%;" src="../../static/icon/NoneCar.png" mode="widthFix"></image>
				</view>
			</view>
		</scroll-view>
		<!-- 底部操作 -->
		<view class="fixed-bottom xpy shadow flex align-center bg-white" style="height: 110rpx;bottom: 55px;">
			<!-- 按钮 -->
			<view class="ml-2 flex-shrink flex align-center ">
				<view @click="handleTotalSelect" class="mr-2 flex-shrink">
					<uni-icons :type="Total.isSelect?'checkbox-filled':'circle'" color="#28a745" size="20"></uni-icons>
				</view>
				<text class="font">全选</text>
			</view>
			<!-- 计算 -->
			<view v-if="!isEdit" class="w-100 flex justify-end mr-2">
				<!-- 费用 -->
				<view class="flex flex-column">
					<!-- 合计 -->
					<view class="flex justify-end align-end" style="height: 50%;">
						<text class="font-sm text-muted">不含运费</text>
						<text class="ml-2 font">合计：</text>
						<money :money="Total.Amount"></money>
					</view>
					<!-- 优惠 -->
					<view class="flex align-center" style="height: 50%;">
						<text class="font-sm text-muted">共优惠：￥0.00</text>
						<view class="ml-1 px-1 bg-hover-light rounded-circle flex align-center justify-center">
							<text class="font-sm">优惠明细</text>
							<uni-icons type="up" size="12"></uni-icons>
						</view>
					</view>
				</view>
				<!-- 按钮 -->
				<view @click="settlement" class="ml-2 px-4 py-2 flex align-center rounded-circle" :class="ShopCar.some(i=>i.isSelect)?'bg-success':'bg-muted'">
					<text class="text-white font">去结算</text>
				</view>
			</view>
			<view v-else class="w-100 flex justify-end mr-2">
				<!-- 按钮 -->
				<view @click="handleBatchClose" class="ml-2 px-4 py-2 flex align-center rounded-circle" :class="ShopCar.some(i=>i.isSelect)?'bg-danger':'bg-muted'">
					<text class="text-white font">删除</text>
				</view>
			</view>
		</view>
		<tabbar :tabId="2"></tabbar>
	</view>
</template>

<script>
	const app = getApp();
	import { mapState,mapMutations } from 'vuex';
	import money from "@/components/tool/money.vue";
	import counter from "@/components/tool/counter.vue";
	import Base64 from "base-64";
	import {accAdd,accMul,accDiv,accSub} from "@/static/js/GeneralUtil.js";
	import {generalQueryBySQLSerialNumber,generalSave} from "@/api/generalBusiness.js";
	import {ShopCartQuantity} from "./js/ShopCartQuantity.js";
	export default {
		components: {
			money,
			counter
		},
		mixins:[ShopCartQuantity],
		data() {
			return {
				isEdit: false, //编辑
				ShopCar: [], //购物车中商品
				DeleteShopCar: [], //被选择删除
				loading: false,
			}
		},
		onShow() {
			this.getData();
		},
		computed: {
			...mapState(['Open_ID','App_ID','BASE_IMG']),
			Total(){//统计
				let isSelect = !this.ShopCar.some(i=>!i.isSelect);//是否全选
				let Amount = 0;
				this.ShopCar.filter(i=>i.isSelect).forEach(item=>{
					Amount = accAdd(Amount, accMul(item.Sales_Unit_Price,item.Quantity))
				})
				return {isSelect,Amount}
			}
		},
		methods: {
			...mapMutations(['modifyShopNum']),
			async handleClose(item){//删除
				item.Row_Status = '1';
				const res = await generalSave({
					Data:JSON.stringify({
						Modify:{
							business_shopping_trolley:[item]
						}
					})
				})
				if(res.Status == "success"){
					uni.showToast({
						title: '已取消！',
						icon: 'none'
					})
					this.getData();
					this.ShopCartQuantity();
				}else{
					uni.showToast({
						title: '系统繁忙！',
						icon: 'none'
					})
				}
			},
			async handleBatchClose(){//批量取消
				let business_shopping_trolley = this.ShopCar.filter(i=>i.isSelect);
				if(business_shopping_trolley.length > 0){
					business_shopping_trolley.forEach(item=>{
						item.Row_Status = '1';
					})
					const res = await generalSave({
						Data:JSON.stringify({
							Modify:{
								business_shopping_trolley
							}
						})
					})
					if(res.Status == "success"){
						uni.showToast({
							title: '已取消！',
							icon: 'none'
						})
						this.getData();
						this.ShopCartQuantity();
					}else{
						uni.showToast({
							title: '系统繁忙！',
							icon: 'none'
						})
					}
				}else{
					uni.showToast({
						title: '请先选择要操作的商品！',
						icon: 'none'
					})
				}
			},
			async handle(e,item){
				item.Quantity = e;
				const res = await generalSave({
					Data:JSON.stringify({
						Modify:{
							business_shopping_trolley:[item]
						}
					})
				})
				if(res.Status == "success"){
					this.getData();
					this.ShopCartQuantity();
				}else{
					uni.showToast({
						title: '系统繁忙！',
						icon: 'none'
					})
				}
			},
			async getData() {
				const res = await generalQueryBySQLSerialNumber({
					SQLSerialNumber:'A_business_shopping_trolley',
					Condition:Base64.encode(this.Open_ID),
					ExtensionCondition:'',
				})
				res.forEach(item=>{
					item.Quantity = parseInt(item.Quantity);
					item.isSelect = false;
				})
				this.ShopCar = res
			},
			handleSelect(item) { //选中商品
				item.isSelect = !item.isSelect
			},
			handleTotalSelect() {
				if(this.Total.isSelect){
					this.ShopCar.forEach(item=>{
						item.isSelect = false;
					})
				} else {
					this.ShopCar.forEach(item=>{
						item.isSelect = true;
					})
				}
			},
			async settlement(SelectShopCar) {//去结算
				let arr = this.ShopCar.filter(i=>i.isSelect)
				arr.forEach(item=>{
					item.Row_Status = '1';
				})
				let str = encodeURIComponent(JSON.stringify(arr))
				if(this.ShopCar.some(i=>i.isSelect)){
					uni.navigateTo({
						url: '/pages/index/submitOrder?Article='+str+'&isShopping_Cart=1'
					})
				}else{
					uni.showToast({
						title:'请选择要结算的商品！',
						icon:'none'
					})
				}
			},
			async generalQueryByTableName(Data,callback){//通用查询
				callback(await generalQueryByTableName(Data));
			},
		}
	}
</script>
